<template>
    <view class="tabs">
        <uv-tabs :itemStyle="{ height: '88rpx' }" :list="tabList" @change="tabChange" :scrollable="false"
            lineWidth="100rpx"></uv-tabs>
    </view>
    <uv-gap height="110rpx"></uv-gap>
    <view v-show="activeTab == 0">
        <uv-cell-group v-for="item in xjData" :border="false"
            :customStyle="{ background: '#fff', borderRadius: '0rpx' }">
            <uv-cell :border="true" title="县名" :value="item.CountyName"></uv-cell>
            <uv-cell :border="true" title="县级负责人" :value="item.CountyResponsibleName"></uv-cell>
            <uv-cell :border="true" title="联系电话">
                <template v-slot:value>
                    <view class="bule   " @click="callPhone(item.CountyResponsibleTel)">
                        {{ item.CountyResponsibleTel }}
                    </view>
                </template>
            </uv-cell>
            <uv-cell :border="true" title="技术单位" :value="item.TechUnitName"></uv-cell>
            <uv-cell :border="true" title="技术负责人" :value="item.TechUnitPerson"></uv-cell>
            <uv-cell :border="true" title="联系电话">
                <template v-slot:value>
                    <view class="bule" @click="callPhone(item.TechUnitPersonTel)">
                        {{ item.TechUnitPersonTel }}
                    </view>
                </template>
            </uv-cell>
        </uv-cell-group>
    </view>
    <view v-show="activeTab == 1">
        <uv-cell-group>
            <uv-cell :title="item.TownName" @click="linkTo(item)" v-for="(item, index) in listData" :key="index"
                :isLink="true">
            </uv-cell>
        </uv-cell-group>
    </view>
    <view v-show="activeTab == 2">
        <wgxxTable v-for="(item, index) in cjData" :key="index" :rawData="item"></wgxxTable>
    </view>
</template>

<script lang="ts" setup>
import wgxxTable from './components/wgxx-table.vue'
import { GetZrtxDistrictGetPage_API, GetZrtxTownGetPage_API, GetZrtxVillageGetPage_API } from '@/server/home'
import { callPhone } from '@/utils/util'
const tabList = [
    { name: "县级-责任体系" }, { name: "乡镇-责任体系" }, { name: "村级-责任体系" }
]
const activeTab = ref(0)
const tabChange = (e) => {
    activeTab.value = e.index
    if (activeTab.value == 0) {
        getList()
    } else if (activeTab.value == 1) {
        // this.pageNumber = 1
        xzList()
    } else if (activeTab.value == 2) {
        cjList()
    }
}
onLoad(() => {
    getList()
})
const xjData = ref([])
const getList = async () => {
    try {
        uni.showLoading({
            title: '加载中',
            mask: true
        })
        const res = await GetZrtxDistrictGetPage_API()
        if (res.IsSuccess) {
            xjData.value = res.Data.Data
        }
    } finally {
        uni.hideLoading()
    }
}
const listData = ref([])
const xzList = async () => {
    try {
        uni.showLoading({
            title: '加载中',
            mask: true
        })
        const res = await GetZrtxTownGetPage_API({
            pageNumber: 1,
            pageSize: 100,
        })
        if (res.IsSuccess) {
            listData.value = res.Data.Data
        }
    } finally {
        uni.hideLoading()
    }
}
const linkTo = (item) => {
    uni.navigateTo({
        url: `/pages/home/wgxx-zrtx?data=${JSON.stringify(item)}`,
    })
}

const cjData = ref([])
const cjList = async () => {
    try {
        uni.showLoading({
            title: '加载中',
            mask: true
        })
        const res = await GetZrtxVillageGetPage_API({
            pageNumber: 1,
            pageSize: 1000,
        })
        if (res.IsSuccess) {
            cjData.value = groupByTownAndVillage(res.Data.Data)
        }
    } finally {
        uni.hideLoading()
    }
}
/**
    * 按乡镇和村庄对数据进行分组
    *
    * @param data 待分组的数据数组
    * @returns 分组后的数组结构
    */
const groupByTownAndVillage = (data) => {
    // 使用对象字面量代替 Map 提升访问性能（键为字符串时）
    const townGroups = {};
    let key = ''
    for (const item of data) { // for...of 比 forEach 性能更优（尤其大数据量）
        key = item.TownCode
        if (!townGroups[key]) {
            townGroups[key] = { ...item, children: [] }
        }
        townGroups[key].children.push(item)
    }
    console.log("townGroups:", townGroups);
    return Object.values(townGroups).map((town: any) => ({
        ...town,
        children: Object.values(town.children)
    }));
}
</script>

<style lang="scss" scoped>
.tabs {
    width: 100%;
    padding: 10rpx 0rpx;
    position: fixed;
    background: #fff;
    z-index: 99;
}
</style>
